<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#box{
				width:100px;
				height:100px;
				border:1px solid black;
				border-radius: 50%;
				position:relative;
				margin:400px auto;
			}
			#box div{
				width:100px;
				height:100px;
				text-align: center;
				line-height: 100px;
				color:white;
				border-radius: 50%;
				position:absolute;
				top:0px;
				left:0px;
				background: crimson;
			}
			#box .cover{
				background: black;
				transition:1s;
			}
			#box:hover .cover{
				background: white;
				color:black;
				transform: rotate(720deg);
			}
			
		</style>
		<script>
			window.onload = function(){
				var oBox = document.getElementById("box");
				var oMenus = oBox.getElementsByClassName('menu');
				console.log(oBox,oMenus)
				var flag = true;
				oBox.onclick = function(){
//					oMenus[0].style.top = '-300px';
//					oMenus[0].style.transition = '1s';
//					oMenus[0].style.transform = 'rotate(720deg)';
//					oMenus[1].style.top = '-270px';
//					oMenus[1].style.left = '-120px';
//					oMenus[1].style.transition = '1s';
//					oMenus[1].style.transform = 'rotate(720deg)';
//					以上是用来模拟子菜单运动的原理.为了说明.当点击时,我们只需要根据角度获得每一个子菜单的left值和top值就可以完成效果。
//                  因此以下代码用循环操作，获得每一个子菜单的left，top。进而完成效果
					for(var i=0;i<oMenus.length;i++){
						var delay = i*0.2;//根据菜单索引计算出对应的延迟时间
						if(flag){
//						获得每一个菜单之间的角度
							var preDeg = 90/(oMenus.length-1);
//							通过当前菜单对应的角度,获得当前菜单的位置
							var pos = getPos(i*preDeg);
//							将得到的位置信息赋值给当前菜单
							oMenus[i].style.left = pos.left + 'px';
							oMenus[i].style.top = pos.top + 'px';
//							将运动及延迟事件赋给当前菜单
							oMenus[i].style.transition = '1s '+delay+'s';
//							将旋转角度赋值给当前菜单
							oMenus[i].style.transform = 'rotate(720deg)';
						}else{
							oMenus[i].style.left = '0px';
							oMenus[i].style.top = '0px';
							oMenus[i].style.transition = '1s'+delay+'s';;
							oMenus[i].style.transform = 'rotate(0deg)';
						}
					}
					flag = !flag;
					
				}
//				getPos方法,用来通过子菜单对应的角度,获得该子菜单的left
//				和top值
				function getPos(deg){
					var l = -300*Math.sin(deg*Math.PI/180);
					var t = -300*Math.cos(deg*Math.PI/180);
					return {left:l,top:t};
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div class="menu">首页</div>
			<div class="menu">视频</div>
			<div class="menu">小说</div>
			<div class="menu">音乐</div>
			<div class="menu">游戏</div>
			<div class="cover">后盾网</div>
		</div>
	</body>
</html>
